<template>
  <div class="btImg">
    <el-tooltip
      style="margin-right: 10px; cursor: pointer"
      effect="light"
      content="开始"
      placement="bottom"
      v-if="isShow"
      @[isClick].native="startAgent"
    >
      <div
        class="iconfont icon-kaishi2 item"
        :class="{ isActive: isClick == 'click' ? false : true }"
      ></div>
    </el-tooltip>

    <el-tooltip
      style="cursor: pointer"
      effect="light"
      content="暂停"
      placement="bottom"
      v-else-if="!isShow"
      @[isClick].native="stopAgent"
    >
      <div
        class="iconfont icon-zanting1 item"
        :class="{ isActive: isClick == 'click' ? false : true }"
      ></div>
    </el-tooltip>
    <el-tooltip
      style="margin-right: 10px; cursor: pointer"
      effect="light"
      content="结束"
      placement="bottom"
      @[isClick].native="endAgent"
    >
      <div
        class="iconfont icon-jieshu2 item"
        :class="{ isActive: isClick == 'click' ? false : true }"
      ></div>
    </el-tooltip>

    <!-- <el-tooltip
      effect="light"
      content="恢复"
      placement="bottom"
      @[isClick].native="resumeRunAgent"
    >
      <div
        class="iconfont icon-huifu item"
        :class="{ isActive: isClick == 'click' ? false : true }"
      ></div>
    </el-tooltip> -->

    <!-- <el-tooltip
      effect="light"
      content="重置"
      placement="bottom"
      @[isClick].native="reLoadAgent"
    >
      <div
        class="iconfont icon-zhongzhi item"
        :class="{ isActive: isClick == 'click' ? false : true }"
      ></div>
    </el-tooltip> -->
    <el-tooltip
      style="cursor: pointer"
      effect="light"
      content="初始化"
      placement="bottom"
      @click.native="initAgentData"
    >
      <div class="iconfont icon-chushihuagezi item"></div>
    </el-tooltip>

    <!-- 初始化显示对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="reset"
      :modal="false"
      :append-to-body="true"
    >
      <el-form :model="form" label-width="180px" :rules="rules" ref="form">
        <el-row>
          <el-col
            style="
              text-align: center;
              font-weight: 600;
              font-size: 20px;
              margin-bottom: 25px;
            "
            >新冠疫情时空传播模拟总人数为：{{ all }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="健康的人数" prop="agentNumber">
              <el-input
                v-model.number="form.agentNumber"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="潜伏者人数" prop="infectedagentNumber">
              <el-input
                v-model.number="form.infectedagentNumber"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="疫苗率(单位:%)" prop="agentVaccineratio">
              <el-input
                v-model.number="form.agentVaccineratio"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="12">
            <el-form-item
              label="潜伏者的疫苗率(单位:%)"
              prop="infectedagenVaccineratio"
            >
              <el-input
                v-model.number="form.infectedagenVaccineratio"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="口罩率(单位:%)" prop="agentMasksratio">
              <el-input
                v-model.number="form.agentMasksratio"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="12"
            ><el-form-item
              label="潜伏者的口罩率(单位:%)"
              prop="infectedagenMasksratio"
            >
              <el-input
                v-model.number="form.infectedagenMasksratio"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="步长" prop="step">
              <el-select
                v-model="form.step"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-switch
            
              v-model="form.isloop"
             
              active-text="循环模式"
              inactive-text="非循环模式"
            >
            </el-switch>
          </el-col>
          <el-col :span="8">
            <el-form-item label="老年占比">
              <el-slider
                v-model="value1"
                @input="changeNum"
                :format-tooltip="formatTooltip"
              ></el-slider>
            </el-form-item>
            <el-form-item label="青年占比">
              <el-slider
                v-model="value2"
                @input="changeNum1"
                :format-tooltip="formatTooltip"
              ></el-slider>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="handleDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { FormItem } from "element-ui";

import {
  sendMessageInitData,
  resumeRunAgent,
  stopAgent,
  endAgent,
  startAgent,
  reLoadAgent,
} from "../network/network.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      isShow: JSON.parse(window.localStorage.getItem("isShow")),
      isClick: window.localStorage.getItem("isClick"),
      dialogVisible: false,
      RestoreAndStartFlag: 1, //第一次开始为true
      form: {
        agentMasksratio: 12,
        agentVaccineratio: 12,
        infectedagenMasksratio: 12,
        infectedagenVaccineratio: 12,
        asymptomaticagentMasksratio: 22,
        asymptomaticagentVaccineratio: 28,
        agentNumber: 300,
        infectedagentNumber: 300,
        asymptomaticagentNumber: 9,
        step: 1,
        isProtect: false,
        yangerAndOlderProportion: 0,
        helpMax: 0,
        isloop:false,
      },
      rules: {
        agentMasksratio: [
          { required: true, message: "口罩率", trigger: "blur" },
        ],
        agentVaccineratio: [
          { required: true, message: "疫苗率", trigger: "blur" },
        ],
        infectedagenMasksratio: [
          { required: true, message: "潜伏者的口罩率", trigger: "blur" },
        ],
        infectedagenVaccineratio: [
          { required: true, message: "潜伏者的疫苗率", trigger: "blur" },
        ],
        numasymptomaticagentMasksratiober: [
          { required: true, message: "无症状口罩率", trigger: "blur" },
        ],
        asymptomaticagentVaccineratio: [
          { required: true, message: "无症状疫苗率", trigger: "blur" },
        ],
        agentNumber: [{ required: true, message: "总数", trigger: "blur" }],
        infectedagentNumber: [
          { required: true, message: "潜伏者人数", trigger: "blur" },
        ],
        asymptomaticagentNumber: [
          { required: true, message: "无症状人数", trigger: "blur" },
        ],
        step: [{ required: true, message: "步长", trigger: "blur" }],
      },
      clickIndex: 0,
      options1: [
        {
          value: 1,
          label: "x1",
        },
        {
          value: 5,
          label: "x5",
        },
      ],
      value1: 0,
      value2: 0,
    };
  },
  //计算属性 类似于data概念
  computed: {
    all() {
      if (this.form.agentNumber === "") {
        this.form.agentNumber = 0;
      }
      if (this.form.infectedagentNumber === "") {
        this.form.infectedagentNumber = 0;
      }
      return (
        parseInt(this.form.agentNumber) +
        parseInt(this.form.infectedagentNumber)
      );
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //对话框重置
    reset() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    //处理对话框确认
    handleDialog() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          sendMessageInitData(this.form);
          this.dialogVisible = false;
          window.localStorage.setItem("isClick", "click");
          this.isClick = "click";
          //先初始化，在开启定时器
          this.$emit("openTimer");

          this.$bus.$emit("getStep", this.form.step);
        } else {
          return false;
        }
      });
    },

    initAgentData() {
      // this.$emit
      this.RestoreAndStartFlag = 1;
      window.localStorage.setItem("RestoreAndStartFlag", 1);
      this.clickIndex++;

      window.localStorage.setItem("clickIndex", this.clickIndex);

      if (this.clickIndex != 1) {
        this.reLoadAgent();
      }

      this.dialogVisible = true;

      //再点击第二次的时候进行form表单的清空
      if (this.clickIndex != 1) {
        this.value1 = 0;
        this.value2 = 0;
        this.form.isProtect = false;
        this.$refs.form.resetFields();
      }
    },

    //恢复函数
    resumeRunAgent() {
      // if (this.isShow) return;
      this.isShow = false;
      window.localStorage.setItem("isShow", false);
      this.$emit("resume");
    },

    stopAgent() {
      console.log("暂停");
      this.isShow = true;
      window.localStorage.setItem("isShow", true);
      this.$emit("stop");
    },
    endAgent() {
      console.log("结束");
      window.localStorage.setItem("isClick", "");
      this.isClick = "";
      this.$emit("end");
      endAgent();
      this.reLoadAgent();
    },

    startAgent() {
      if (this.RestoreAndStartFlag) {
        console.log("开始");
        this.isShow = false;
        window.localStorage.setItem("isShow", false);
        startAgent();
        this.RestoreAndStartFlag = 0;
        window.localStorage.setItem("RestoreAndStartFlag", 0);
      } else {
        this.isShow = false;
        console.log("恢复");
        window.localStorage.setItem("isShow", false);
        this.$emit("resume");
      }
    },
    reLoadAgent() {
      this.isShow = true;
      window.localStorage.setItem("isShow", true);
      this.$emit("reload");
      reLoadAgent();
    },
    changeNum() {
      this.value2 = 100 - this.value1;
      this.form.yangerAndOlderProportion = this.value2;
    },
    changeNum1() {
      this.value1 = 100 - this.value2;
      this.form.yangerAndOlderProportion = this.value2;
    },
    formatTooltip(val) {
      return val + "%";
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!window.localStorage.getItem("isClick")) {
      window.localStorage.setItem("isClick", "");
    } else {
      this.isClick = window.localStorage.getItem("isClick");
    }

    if (!window.localStorage.getItem("isShow")) {
      window.localStorage.setItem("isShow", true);
      this.isShow = JSON.parse(window.localStorage.getItem("isShow"));
    } else {
      this.isShow = JSON.parse(window.localStorage.getItem("isShow"));
    }

    if (!window.localStorage.getItem("RestoreAndStartFlag")) {
      window.localStorage.setItem("RestoreAndStartFlag", 1);
      this.RestoreAndStartFlag = JSON.parse(
        window.localStorage.getItem("RestoreAndStartFlag")
      );
    } else {
      this.RestoreAndStartFlag = JSON.parse(
        window.localStorage.getItem("RestoreAndStartFlag")
      );
    }

    if (!window.localStorage.getItem("clickIndex")) {
      window.localStorage.setItem("clickIndex", 0);
      this.clickIndex = JSON.parse(window.localStorage.getItem("clickIndex"));
    } else {
      this.clickIndex = JSON.parse(window.localStorage.getItem("clickIndex"));
    }
  },
  //声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.form.helpMax = Math.floor(
      (this.form.agentNumber + this.form.infectedagentNumber) * 0.4
    );
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.btImg {
  background-color: transparent;
  position: absolute;
  top: -3px;
  right: 40px;
  display: flex;
  /deep/ .el-dialog {
    z-index: 777;
  }

  .item {
    font-size: 20px;
    margin: 5px 0;
    color: white;
  }

  .iconfont {
    font-size: 50px;
  }
  .isActive {
    color: red !important;
  }
  /deep/ .el-dialog__wrapper {
    z-index: 1 !important;
  }
  .isTooltip {
    z-index: 222222;
  }
}
</style>
